<!--
@name:
@description:
@author: mr.ck
@title: talk is cheap, show me the code!!!
@time: 2020-12-30 17:08:51
-->

<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>添加关键词</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        #box {
            width: 500px;
            margin: 50px auto;
        }

        table {
            height: 20%;
            text-align: center;
            border: 1px solid #cccccc;
        }

        th {
            text-align: center;
            background-color: #b3b3b3;
        }

        tr:not(:last-child) td:nth-child(1){
            padding-top: 17px !important;   /*!important 最大权限*/
            background-color: #b3b3b3;
        }

        td {
            position: relative;
        }

        td span {
            width: 100px;
            position: absolute;
            right: -110px;
            top: 35%;
            display: block;
            text-align: left;
            font-size: 10px;
            color: #d92727;
        }

    </style>
</head>
<body>
<div id="box">
    <form action="" method="post">
        <table border="1px" class="table">
            <tr>
                <th colspan="3">添加关键词</th>
            </tr>

            <tr>
                <td>关键词</td>
                <td>    <!--autocomplete="off"关闭表单记录数据-->
                    <input type="text" autocomplete="off" id="name" placeholder="请输入关键词" class="form-control">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>业务类型</td>
                <td>
                    <input type="text" id="type" placeholder="请输入业务类型" class="form-control">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td>
                    <input type="text" id="time" placeholder="请输入日期" class="form-control">
                    <span></span>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <button type="submit" class="btn btn-primary">提交</button>
                </td>
            </tr>
        </table>
    </form>
</div>

<script src="./js/jquery-3.5.1.js"></script>
<script !src="">
    // $("tr:gt(0):even").css({backgroundColor:"#e0e0e0"})

    $(function (){
        // $("#name").blur(function (){ //丢失焦点执行
        //     if (check()){
        //
        //     }
        // })
        /*$("#type").val("测试");
        $("#type").select();
        $("#type").focus(); //设置焦点*/

        $("form").submit(function (){
            if(check()){
                // alert("验证通过");
                //
                // alert($("#name").val());
                // alert($("#type").val());
                // alert($("#time").val());
            }else {
                return false;
            }
        })

        function check(){
            let flag = true;

            if($("#name").val().trim().length == 0){
                $("#name").next().html("请输入关键词");
                flag = false
            }else {
                if($("#name").val().trim().length < 6 || $("#name").val().trim().length > 15){
                    $("#name").next().html("关键词长度必须在6到15位之间");
                    flag = false
                }else {
                    $("#name").next().html("");
                }
            }

            if($("#type").val().trim().length == 0){
                $("#type").next().html("请输入业务类型");
                flag = false
            }else {
                $("#type").next().html("");
            }

            if($("#time").val().trim().length == 0){
                $("#time").next().html("请输入日期");
                flag = false
            }else {
                let reg = /(?!0000)[0-9]{4}-((0[1-9]|1[0-2])-(0[1-9]|1[0-9]|2[0-8])|(0[13-9]|1[0-2])-(29|30)|(0[13578]|1[02])-31)/;
                if(reg.test($("#time").val())){
                    $("#time").next().html("");
                }else {
                    $("#time").next().html("格式不正确");
                    flag = false
                }
            }

            return flag;
        }
        /*$("[type]");
        $("[type='text']")
        $("[type^='t']")
        $("[type*='te']")*/
    });
</script>
</body>
</html>